<template>
  <view>
    <!-- 搜索框 -->
    <UgoSearch></UgoSearch>
    <!-- 轮播图 -->
     <!-- img-mode="scaleToFill" 原生小程序image mode属性 -->
    <u-swiper
     img-mode="scaleToFill"
     height="340"
     :list="swiperdata" 
     name="image_src"
     > </u-swiper>
      <!-- 导航栏 -->
     <view class="catitems u-flex">
      <navigator class="u-flex-1 u-p-10" v-for="item in catitems" :key="item.name">
       <u-image mode="widthFix" :src="item.image_src"></u-image>
      </navigator>
     </view>
     <!-- 商品陈列 -->
     <view class="floordata">
      <view class="floor-group" v-for="item1 in floordata" :key="item1.floor_title.name">
        <!-- 商品陈列标题 -->
        <view class="floor-title">
          <u-image :src="item1.floor_title.image_src" mode="widthFix"></u-image>
        </view>
         <!-- 商品陈列内容 -->
           <view class="product-list">
            <navigator v-for="item2 in item1.product_list" :key="item2.name">
              <u-image mode="scaleFill" height="100%" :src="item2.image_src"></u-image>
            </navigator>
        </view>
      </view>
     </view>
  </view>
</template>

<script>
export default {
  data(){
    return{
      // 轮播图数组
      swiperdata:[],
      // 导航栏数组
      catitems:[],
      // 商品陈列数组
      floordata:[]
    }
  },
  // 页面开始加载的时候发送请求
  onLoad(){
    // 获取轮播图数据
    this.getSwiperData(),
      // 获取导航栏数据
    this.getCatitems(),
      // 获取商品陈列数据
    this.getFloordata()
  },
  methods:{
    // 使用uniapp发起的请求
    // async getSwiperData(){
    //   const [err,result]=await uni.request({
    //     url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
    //   });
    //   this.swiperdata = result.data.message;
    // }
		
    // 使用uview发起的请求 
    // 获取轮播图数据
     async getSwiperData(){
    const result=await this.$u.get('/home/swiperdata')
    this.swiperdata=result.message
     },
    //  获取导航栏数据
     async getCatitems(){
    const result=await this.$u.get('home/catitems')
    this.catitems=result.message
     },
     // 获取商品陈列数据
       async getFloordata(){
    const result=await this.$u.get('home/floordata')
    console.log(result);
    this.floordata=result.message
     },

			
  }
}
</script>

<style lang="scss">
.product-list{
    // 清除
  overflow: hidden;
  // 公共样式
  navigator {
    // 浮动
    float: left;

    margin-left: 14rpx;
  }
  // 第一个导航标签
  navigator:first-child {
    width: 232rpx;
    height: 386rpx;
  }
  // 后四个导航标签
  // 前几个 :nth-child(-n+ 几)
  // 后几个 :nth-last-child(-n+ 几)
  navigator:nth-last-child(-n + 4) {
    width: 232rpx;
    height: 188rpx;
  }
  navigator:nth-last-child(-n + 2) {
    margin-top: 14rpx;
  }
}
</style>